<template>
	<view>
		<view class="imgs">
			<text>图片展示</text>
			<scroll-view scroll-x="true" class="scroill_img">
				<view class="imgs_img" v-for="(v,i) in arr.images" :key="i">
					<image :src="base.imgUrl+v" mode="heightFix" style="height: 240rpx;"></image>
				</view>
			</scroll-view>
		</view>
		<view class="texts">
			<view class="flex-r-s-c texts_view">
				<text class="name">门店名称: </text>
				<text class="txts">{{arr.name}}</text>
			</view>
			<view class="flex-r-s-c texts_view">
				<text class="name">营业时间: </text>
				<text class="txts">{{arr.business_hours}}</text>
			</view>
			<view class="flex-r-s-c texts_view" @click="viewMapLocation(arr.lng,arr.lat,arr.name)">
				<text class="name">门店地址: </text>
				<image src="../../static/icon/position2.png" mode="widthFix"></image>
				<text class="txts">{{arr.address}}</text>
			</view>
			<view class="flex-r-s-c texts_view" @click="pops(true)">
				<text class="name">门店电话: </text>
				<image src="../../static/icon/phone1.png" mode="widthFix"></image>
				<text class="txts">{{arr.mobile}}</text>
			</view>
		</view>
		<!-- 地图 -->
		<view class="maps">
			<!-- <storeMap :latitude="Number(arr.lat)" :longitude="Number(arr.lng)" :name="arr.name"></storeMap> -->
			<map style="width: 100%; height: 100%" :latitude="Number(arr.lat)" :longitude="Number(arr.lng)" :markers="markers"></map>
		</view>
		<view class="yuyues flex-c-c-c">
			<view class="flex-c-c-c" @click="chuancan()">
				<text>点击预约</text>
			</view>
		</view>
		<!-- 特色项目 -->
		<!-- <view class="characteristic flex-c-c-c">
			<view class="characteristic_btn flex-c-c-c">
				<text>特色服务项目</text>
			</view>
			<view class="flex-r-c-c" style="margin: 35rpx 0;">
				<text class="characteristic_text">服务顾客超3500万人</text>
				<text class="characteristic_text" style="margin-left:25rpx;">顾客满意度超 99.2%</text>
			</view>
			<view class="characteristic felx-c-c-c" v-for="(v,i) in 7">
				<image src="" mode=""></image>
			</view>
		</view> -->
		<!-- 电话弹框 -->
		<u-popup v-model="phone_show" mode="bottom" border-radius="16" height="464rpx">
			<view style="height: 100%;width: 100%;" class="flex-c-c-c">
				<view class="flex-c-c-c" style="width: 686rpx;height: 274rpx;border-bottom: 2rpx solid #F2F2F2;">
					<view class="flex-r-s-c">
						<image src="../../static/icon/phone1.png" mode="widthFix" style="width: 36rpx;"></image>
						<text style="font-size:36rpx;color: #333333;">{{arr.mobile}}</text>
					</view>
					<view class="flex-c-c-c" @click="phone_fn()"
						style="width: 348rpx;height: 74rpx;border-radius: 38rpx;background-color:#45806E;margin-top: 36rpx;">
						<text style="color: #FFFFFF;font-size: 32rpx;font-weight: 500;"> 拨 打 </text>
					</view>
				</view>
				<view class="flex-c-c-c" style="width: 686rpx;height: 190rpx">
					<view class="flex-c-c-c" @click="pops(false)"
						style="width: 344rpx;height:70rpx;border-radius: 38rpx;background-color:#FFFFFF;border: 2rpx solid #3D7262;">
						<text style="color: #3D7262;font-size: 32rpx;font-weight: 500;"> 取 消 </text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import storeMap from '../../components/storeMap.vue'
	export default {
		data() {
			return {
				phone_show: false,
				base: this.$base,
				arr: {},
				id: null,
				userLogin:!uni.getStorageSync('user_info'),
				markers: [{
					id: 0,
					latitude: null,
					longitude: null,
					width:40,
					height:40,
					iconPath: '../../static/icon/ditu.png',
					label: {
						content: null,
						color: '#000',
						fontSize: 16,
						x: null,
						y: null,
						textAlign: 'conter',
						joinCluster: false
					}
				}]
			}
		},
		components: {
			storeMap
		},
		onLoad(el) {
			this.id = el.id
			this.$api.store_getStore({
				store_id: el.id
			}).then(res => {
				this.arr = res.data.data
				this.markers[0].latitude = res.data.data.lat
				this.markers[0].label.x = res.data.data.lat
				this.markers[0].longitude = res.data.data.lng
				this.markers[0].label.y = res.data.data.lng
				this.markers[0].label.content = res.data.data.name
			})
		},
		methods: {
			chuancan() {
				this.getUserInfo()
				if (!this.userLogin) {
					uni.$emit('storedID',{id:this.id,isLogin:true})
					// uni.switchTab({
					// 	url:'/pages/tabBar/order/order'
					// })
					uni.redirectTo({
						url:'/pages/tabBar/serviceReservation/serviceReservation'
					})
				}
			},
			getUserInfo() { //调用微信登录
				if (!this.userLogin) return
				let that = this
				uni.getUserProfile({
					desc: 'Wexin', // 这个参数是必须的
					success: res => {
						uni.login({
							provider: 'weixin',
							success: res1 => {
								let obj = {
									nickname: res.userInfo.nickName,
									avatar: res.userInfo.avatarUrl,
									code: res1.code
								}
								that.$api.wx_login(obj).then(login => {
									console.log(login);
									//请求成功后的判断
									res = {
										...res,
										...login.data
									}
									uni.setStorage({
										key: 'user_info',
										data: res,
										success: function() {
											uni.showToast({
												title: '用户授权成功',
												icon: 'none'
											})
											that.$api.user_info().then(
												users => {
													console.log(users)
													res.id = users.data
														.data.id
													that.userInfo = res
													uni.setStorage({
														key: 'user_info',
														data: res,
														success() {
															uni.$emit('storedID',{id:that.id,isLogin:false})
															uni.redirectTo({
																url:'/pages/tabBar/serviceReservation/serviceReservation'
															})
														}
													});
												})
										}
									});
								})
							}
						})
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			pops(is) {
				this.phone_show = is
			},
			// 拨号
			phone_fn() {
				uni.makePhoneCall({
					phoneNumber: this.arr.mobile //仅为示例
				});
			},
			//唤起地图偏差解决
			zhuanhuan(obj, i) {
				let that = this
				console.log(obj)
				let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
				let x = obj.lng - 0.0065;
				let y = obj.lat - 0.006;
				let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				let wz = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				let lon = z * Math.cos(wz);
				let lat = z * Math.sin(wz);
				if (i === 'lat') {
					console.log(lat)
					return Number(obj.lat)
				} else {
					console.log(lon)
					return Number(obj.lng)
				}
			},
			// 唤起地图
			viewMapLocation(longitude, latitude, address) {
				latitude = this.zhuanhuan({
					lng: longitude,
					lat: latitude
				}, 'lat');
				longitude = this.zhuanhuan({
					lng: longitude,
					lat: latitude
				}, 'lng');
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});

			},
		}
	}
</script>

<style lang="less" scoped>
	.imgs {
		width: 100%;
		height: auto;
		padding: 20rpx 32rpx;
		background-color: #F5F5F5;

		text {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.scroill_img {
			height: 240rpx;
			width: 100%;
			margin-top: 20rpx;
			box-sizing: border-box;
			white-space: nowrap;
		}

		.imgs_img {
			height: 240rpx;
			background: #FFF;
			border-radius: 12rpx;
			display: inline-block;
			margin-right: 16rpx;
			width: auto;

			image {
				height: 240rpx;
				width: auto;
			}
		}
	}

	.texts {
		padding: 1rpx 32rpx;
		background-color: #FFFFFF;
		width: 100%;
		height: auto;

		.texts_view {
			margin: 15rpx 0rpx;

			.name {
				color: #333333;
				font-size: 28rpx;
				margin-right: 15rpx;
			}

			image {
				width: 30rpx;
				margin-right: 15rpx;
			}

			.txts {
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.maps {
		height: 720rpx;
		width: 750rpx;
		background-color: #FFFFFF;
	}

	.yuyues {
		width: 750rpx;
		padding: 30rpx 0rpx;

		view {
			height: 65rpx;
			width: 348rpx;
			background-color: #45806E;
			border-radius: 50rpx;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.characteristic {
		width: 750rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx;

		.characteristic_btn {
			width: 259rpx;
			background-color: #FF892A;
			height: 62rpx;
			border-radius: 8rpx;

			text {
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}

		.characteristic {
			width: 650rpx;
			height: 250rpx;
			border-radius: 10rpx;
			background-color: #F4F4F4;
			margin-top: 30rpx;
		}
	}
</style>
